import { useState } from "react";
import { useNavigate } from "react-router-dom";

const menuList = [
  { title: "首页",path:'/', img:"./images/home_icon.png", isFruit: false, id: 1 },
  { title: "赚钱",path:'/earn', img:"./images/earn_icon.png", isFruit: false, id: 2 },
  { title: "PK",path:'/pk', img:"", isFruit: true, id: 3 },
  { title: "任务",path:'/task', img:"./images/task_icon.png", isFruit: true, id: 4 },
  { title: "NFT",path:'/nft', img:"./images/nft_icon.png", isFruit: true, id: 5 },
];

const Menu = () => {
  const [items] = useState(menuList);

  // const menuItem = (id: number, newValue: boolean) => {
  //   setItems(
  //     items.map((item) =>
  //       item.id === id ? { ...item, isFruit: newValue } : { ...item, isFruit: false }
  //     )
  //   );
  // };

  const navigate = useNavigate();
  function handleClick(url: string) {
    navigate(url);
  }

  return (
    <div className="foot-menu">
      <ul>
        {items.map((item) => (
          <li
            key={item.id}
            className={item.title=='PK'?"item-pk":""}
            onClick={() => {
              handleClick(item.path);
            }}
          ><div className="item-box">
            <div className="icon">{item.title!='PK'?<img src={item.img} /> : null}</div>
            <div className="title">{item.title}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default Menu;
